<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Service login form Responsive Widget Template : W3Layouts</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="//fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;700&display=swap" rel="stylesheet"/>

    <link rel="stylesheet" href="/static/css/style.css" type="text/css" media="all" />
    <link rel="icon" href="/static/img/logo/logo2.ico"/>


</head>

<body>
<div class="signinform" id="app">
    <h1>Service Login Form</h1>
    <div class="container">
        <div class="w3l-form-info">
            <div class="w3_info">
                <h2>Login</h2>
                <form action="/login/verify" method="post">
                    <div class="input-group">
                        <span><i class="fas fa-user" aria-hidden="true"></i></span>
                        <input type="text" placeholder="Username or Email" required="" name="username"
                            v-model="userMsg.account">
                    </div>
                    <div class="input-group">
                        <span><i class="fas fa-key" aria-hidden="true"></i></span>
                        <input type="password" placeholder="Password" required="" name="password"
                            v-model="userMsg.password">
                    </div>
                    <div class="form-row bottom">
                        <div class="form-check">
                            <input type="checkbox" id="remenber" name="remenber" value="remenber">
                            <label for="remenber"> Remember me?</label>
                        </div>
                        <a href="#" class="forgot" @click = "resetPwd">Forgot password?</a>
                    </div>
                    <button class="btn btn-primary btn-block" type="submit" >Login</button>
                </form>
                <p class="account">Don't have an account? <a href="/login/sign_up">Sign up</a></p>
            </div>
        </div>
    </div>
    <button  class="ui-icon-note" @click="sendMsg">send message</button>
</div>

<!-- fontawesome v5-->
<!--<script src="/static/js/fontawesome.js"></script>-->
<!--<script src="/static/js/jquery/jquery-1.11.3.js"></script>-->
<!--<script src="/static/js/jquery/jquery-1.11.3.min.js"></script>-->
<script src="/static/JS/vue/vue_3_2_29/vue.global.js"></script>
<script src="/static/JS/axios/axios.js"></script>
<script th:inline="javascript">
    const Counter = {
        data(){
            return{
                authState: [[${authState}]],
                userMsg: [{
                    account: '',
                    password: ''
                }]


            }
        },create:{
            isAuth(){
                const con = this;
                if(this.authState === 'false'){
                    alert("login false")
                }
            }
        },
        methods:{
            loginCheck(){
                const con = this;

                console.log(con.userMsg.account)
                axios({
                    method: 'post',
                    url: '/login/verify',
                    params: {
                        username: con.userMsg.account,
                        password: con.userMsg.password
                    }
                }).then(response => {
                        response.data
                        console.log(response);
                    }).catch(error => {
                        console.log(error);
                    })
            },
            resetPwd() {
                const con = this;

                axios.post('/login/resetAccount', {
                    username: con.userMsg.account,
                    password: con.userMsg.password
                }).then(response => {
                    response.data
                    console.log(response);
                }).catch(error => {
                    console.log(error);
                })
            },sendMsg(){
                axios({
                    url: '/configs/httpConnTest',
                    method: 'post',
                    data: {
                        code: '505'
                    }
                }).then(res=>{
                    console.log(res.data);
                }).catch(err=>{
                    console.log(err.data);
                })
            }

        }

    };
    const app = Vue.createApp(Counter).mount('#app');
</script>
</body>

</html>